<template>
  <div>
    <el-dialog
      title="查看记录"
      v-model="editVisible"
      width="80%"
      top="10vh"
      :close-on-click-modal="false"
      @close="handleclose"
    >
      <el-form>
        <el-form-item>
          <div>
            <div class="handle-box">
              <div>
                <span class="title_name">碳配额量：</span
                ><el-input
                  v-model="seachfrom.carbonQuota"
                  placeholder="请输入"
                  class="handle-input mr10"
                ></el-input>
              </div>
              <div>
                <span class="title_name">实际碳排量： </span
                ><el-input
                  placeholder="请输入"
                  class="handle-input mr10"
                  v-model="seachfrom.carbonDisplacement"
                ></el-input>
              </div>
              <div>
                <span class="title_name">年份： </span
                ><el-input
                  placeholder="请输入"
                  class="handle-input mr10"
                  v-model="seachfrom.year"
                ></el-input>
              </div>
              <el-button
                type="primary"
                class="icon-search"
                icon="el-icon-search"
                @click="handleSearch"
                >查询</el-button
              >
              <el-button class="icon-search" @click="emptySearch">清空</el-button>
            </div>

            <el-table
              :data="tableData"
              border
              class="table"
              style="width: 90%"
              ref="multipleTable"
              header-cell-class-name="table-header"
            >
              <!-- <el-table-column type="selection" label="全选" width="55">
        </el-table-column> -->
              <el-table-column prop="id" label="序列号" width="65" align="center">
                <template #default="scope">
                  <el-radio-group v-model="radioValue" @change="handleSelect">
                    <el-radio :label="scope.$index">{{
                      Number(
                        seachfrom.pageSize * (seachfrom.pageNum - 1) + 1 + scope.$index
                      )
                    }}</el-radio></el-radio-group
                  >
                </template></el-table-column
              >
              <el-table-column prop="business" label="企业姓名"></el-table-column>
              <el-table-column prop="year" label="年份"></el-table-column>
              <el-table-column
                prop="carbonQuota"
                label="碳配额量（吨）"
              ></el-table-column>
              <el-table-column
                prop="carbonPayOff"
                label="应清缴量（吨）"
              ></el-table-column>
              <el-table-column
                prop="carbonDisplacement"
                label="实际清缴（吨）"
              ></el-table-column>
              <el-table-column label="操作" width="250" align="center">
                <template #default="scope">
                  <el-button type="text" @click="handleView(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="btn_b">
              <el-button @click="handleclose" class="icon-search1">取消</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer> </template>
    </el-dialog>
    <view-Data
      :viewVisible="viewVisible"
      v-if="viewVisible"
      :TaxRecordsId="TaxRecordsId"
      :list="filterTableData"
      :year="RecordYear"
      @handlecloseView="handlecloseView"
    ></view-Data>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import api from "../api/api";
import viewData from "../components/view_Data.vue";
export default {
  components: { viewData },
  setup(props, context) {
    console.log(context);
    // 参考图片
    const editVisible = ref(context.attrs.editVisible);
    const radioValue = ref(context.attrs.radioValue);
    const viewVisible = ref(false);
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    const seachfrom = reactive({
      pageNum: 1,
      pageSize: 10,
      business: null,
      businessLicenseNumber: context.attrs.businessLicenseNumber,
      carbonQuota: null,
      carbonDisplacement: null,
      year: null,
      isLink: true,
      industryCategory: null,
      accountId: null,
    });
    const tableData = ref([]);
    const pageTotal = ref(0);
    const SelectList = ref([]);
    // 获取表格数据
    const getData = () => {
      api
        .postFormAPI("trade/system/business/carbon/getRecordList", seachfrom)
        .then((res) => {
          if (res.data.code == 1) {
            tableData.value = res.data.data;
            pageTotal.value = res.data.total || 0;
          } else {
            ElMessage.error(res.data.message);
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getData();
    // 查询操作
    const handleSearch = () => {
      seachfrom.pageNum = 1;
      getData();
    };
    const emptySearch = () => {
      seachfrom.pageNum = 1;
      seachfrom.carbonQuota = null;
      seachfrom.carbonDisplacement = null;
      seachfrom.year = null;
    };
    const handleSelect = (res) => {
      radioValue.value = res;
    };
    const handleSaveEdit = () => {
      context.emit("handleSelect", tableData.value[radioValue.value], radioValue.value);
    };
    const TaxRecordsId = ref("");
    const RecordYear = ref("");
    const handleView = (row) => {
      TaxRecordsId.value = row.id;
      RecordYear.value = row.year;
      viewVisible.value = true;
    };
    const handlecloseView = () => {
      viewVisible.value = false;
    };
    return {
      RecordYear,
      TaxRecordsId,
      radioValue,
      editVisible,
      viewVisible,
      tableData,
      seachfrom,
      pageTotal,
      SelectList,
      filterTableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "240吨",
        },
        {
          date: "2016-05-02",
          name: "John",
          address: "240吨",
        },
        {
          date: "2016-05-04",
          name: "Morgan",
          address: "240吨",
        },
        {
          date: "2016-05-01",
          name: "Jessy",
          address: "240吨",
        },
        {
          date: "2016-05-02",
          name: "John",
          address: "240吨",
        },
        {
          date: "2016-05-04",
          name: "Morgan",
          address: "240吨",
        },
        {
          date: "2016-05-01",
          name: "Jessy",
          address: "240吨",
        },
      ],
      handleclose,
      handleSearch,
      emptySearch,
      handleSelect,
      handleSaveEdit,
      handleView,
      handlecloseView,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";
&:deep(.el-dialog) {
  // background: none;
  box-shadow: none;
}
&:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #909399;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 360px;
  font-size: 30px;
}
&:deep(.el-form-item__content) {
  text-align: center;
}
&:deep(.el-input__inner) {
  width: 150px !important;
}
.btn_b {
  padding: 30px 0 0 0;
}
&:dee(.el-dialog__footer) {
  padding: 0;
}
&:deep(.el-dialog__body) {
  padding: 0 30px;
}
</style>
